<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="staffForm.staffId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="staffForm.staffName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="add()">添加</el-button>
            <el-button type="primary" @click="search()">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="staffs"
            border
            style="width: 100%">
        <el-table-column
                prop="staffid"
                label="员工编号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="password"
                label="账号密码">
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码">
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职务名称">
        </el-table-column>
        <el-table-column
                prop="department.deptName"
                label="部门名称">
        </el-table-column>
        <el-table-column
                prop="department.remark"
                label="职位描述">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==1"
                        effect="dark">
                    在 职
                </el-tag>
                <el-tag
                        type="info"
                        v-else-if="scope.row.state==2"
                        effect="dark">
                    未入职
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300px" style="text-align: center;">
            <template slot-scope="scope">
                <div v-if="scope.row.staffid == '111'"
                     style="text-align: center;color: black;font-weight: 600;font-size: 16px">
                    <el-button @click="deleterole(scope.row)" type="danger" icon="el-icon-delete" size="small" circle></el-button>
                    馆长
                </div>
                <el-row v-else>
                    <el-button @click="deleterole(scope.row)" type="danger" icon="el-icon-delete" size="small" circle></el-button>
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="transfer(scope.row)" type="warning" size="small">调动</el-button>
                    <el-button @click="dimission(scope.row)" type="danger" size="small">离职</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!------添加弹窗开始------->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" center width="30%">
        <el-form :model="addstaff" :rules="addStaffRules" ref="addForm" label-width="70">
            <el-form-item label="员工编号" prop="staffid">
                <el-input v-model="addstaff.staffid" autocomplete="off" @blur="blur(addstaff.staffid)"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" prop="staffname">
                <el-input v-model="addstaff.staffname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号密码" prop="staffname">
                <el-input v-model="addstaff.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="idcard">
                <el-input v-model="addstaff.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="addstaff.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
                <el-input v-model="addstaff.phone" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="入职时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addstaff.entrytime" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="部门名称" prop="department.deptId">
                <el-select v-model="addstaff.department.deptId" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="d in dept" :label="d.deptName" :key="d.deptId" :value="d.deptId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务名称" prop="role.roleid">
                <el-select v-model="addstaff.role.roleid" placeholder="请选择职位" style="width: 100%">
                    <el-option v-for="role in role" :label="role.rolename" :value="role.roleid"
                               :key="role.roleid"></el-option>
                </el-select>
            </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="enter">确 定</el-button>
        </div>
    </el-dialog>
    <!--------添加弹窗结束-------->

    <!----------编辑弹窗开始------>
    <el-dialog title="编辑" :visible.sync="editDialogFormVisible" center width="30%">
        <el-form :model="updatestaff" label-width="70">
            <el-form-item label="员工编号">
                <el-input v-model="updatestaff.staffid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
                <el-input v-model="updatestaff.staffname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号密码" prop="staffname">
                <el-input v-model="updatestaff.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="updatestaff.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="updatestaff.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="updatestaff.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-input v-model="updatestaff.entrytime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-select v-model="updatestaff.department.deptId" placeholder="请选择部门" style="width: 100%" disabled>
                    <el-option v-for="d in depts" :label="d.deptName" :key="d.deptId" :value="d.deptId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务名称">
                <el-select v-model="updatestaff.role.roleid" placeholder="请选择职位" style="width: 100%" disabled>
                    <el-option v-for="role in roles" :label="role.rolename" :value="role.roleid"
                               :key="role.roleid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEnter">确 定</el-button>
        </div>
    </el-dialog>
    <!----------编辑弹窗结束------>

    <!----------调动弹窗结束------>
    <el-dialog title="调动" :visible.sync="transferstaffFormVisible" center width="30%">
        <el-form :model="transferstaff" label-width="70">
            <el-form-item label="部门名称">
                <el-select v-model="transferstaff.department.deptId" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="d in depts" :label="d.deptName" :key="d.deptId" :value="d.deptId"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="职务名称">
                <el-select v-model="transferstaff.role.roleid" placeholder="请选择职位" style="width: 100%">
                    <el-option v-for="role in roles" :label="role.rolename" :value="role.roleid"
                               :key="role.roleid"></el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="transferstaffFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="transferEnter">确 定</el-button>
        </div>
    </el-dialog>
    <!----------调动弹窗结束------>


</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            staffForm: {},
            staffs: [],
            current: 1,
            pageSize: 5,
            total: 0,
            addstaff: {
                staffid: '',
                staffname: '',
                idcard: '',
                address: '',
                phone: '',
                deptid: '',
                entrytime: '',
                roleid: '',
                role: {},
                department: {}
            },

            dialogFormVisible: false,
            transferstaffFormVisible: false,
            roles: [],
            role:[],
            depts: [],
            dept:[],
            addStaffRules: {
                staffid: [
                    {required: true, message: '请输入员工编号', trigger: 'blur'}
                ],
                staffname: [
                    {required: true, message: '请输入员工姓名', trigger: 'blur'}
                ],
                idcard: [
                    {required: true, message: '请输入身份证号码', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入电话号码', trigger: 'blur'}
                ],
                entrytime: [
                    {required: true, message: '请输入入职日期', trigger: 'blur'}
                ],
                'role.roleid': [
                    {required: true, message: '请选择职务名称', trigger: 'change'}
                ],
                'department.deptId': [
                    {required: true, message: '请选择部门名称', trigger: 'change'}
                ]
            },
            editDialogFormVisible: false, // 控制编辑弹窗显示与隐藏
            updatestaff: {
                role: {},
                department: {}
            }, // 存储要编辑的员工信息
            newdeptid: '',
            transferstaff: {
                role: {},
                department: {},
                deptid: '',
                roleid: '',
                flg:false,

            }
        },
        created() {
            this.loadTable();
            this.loadDepts();
            this.loadRoles();
        },
        methods: {
            // 搜索方法
            search() {
                // 当前页码重置为1
                this.current = 1;
                // 加载表格
                this.loadTable();
                // 打印staffForm
                console.log(this.staffForm);
            },
            // 加载表格
            loadTable() {
                // post请求，参数为当前页码、每页显示条数、staffForm
                axios.post("/staff/list/" + this.current + "/" + this.pageSize, this.staffForm).then(result => {
                    console.log("===========================================A============================")
                    // 打印结果
                    console.log(result);
                    // 将获取到的数据赋值给staffs
                    this.staffs = result.data.data.list;
                    // 将获取到的总数赋值给total
                    this.total = result.data.data.total;

                });
            },
            // 每页显示条数改变时触发
            handleSizeChange(val) {
                // 将每页显示条数赋值给pageSize
                this.pageSize = val;
                // 加载表格
                this.loadTable();
            },
            // 当前页码改变时触发
            handleCurrentChange(val) {
                // 将当前页码赋值给current
                this.current = val;
                // 加载表格
                this.loadTable();
            },


            //添加开始
            add() {
                //显示添加员工对话框
                this.dialogFormVisible = true;
            },
            enter() {
                if(this.flg) {
                    //验证表单是否通过
                    this.$refs.addForm.validate((valid) => {
                        if (valid) {
                            //如果通过，则打印添加员工信息
                            console.log('添加员工', this.addstaff);
                            //将部门id赋值给员工
                            this.addstaff.deptid = this.addstaff.department.deptId;
                            //将角色id赋值给员工
                            this.addstaff.roleid = this.addstaff.role.roleid;
                            //发送post请求，添加员工
                            axios.post("/staff/add", this.addstaff)
                                .then(result => {
                                    //打印添加结果
                                    console.log(result);
                                    //刷新表格
                                    this.loadTable();
                                    //关闭对话框
                                    this.dialogFormVisible = false;
                                    //提示添加成功
                                    this.$message.success('添加成功');
                                })
                                .catch(error => {
                                    //打印添加失败信息
                                    console.error('添加失败', error);
                                    //提示添加失败
                                    this.$message.error('添加失败');
                                });
                        } else {
                            //如果未通过，则返回false
                            return false;
                        }
                    });
                }else {
                    this.$message.error('填写信息有误');
                }
            },
            //添加结束


            //删除开始
            deleterole(row) {
                // 打印当前行数据
                console.log(row);
                // 发送delete请求，删除指定id的员工
                axios.delete("/staff/deletestaff/" + row.id)
                    .then(result => {
                        // 删除成功，重新加载表格
                        this.loadTable();
                        // 提示删除成功
                        this.$message.success('删除成功');
                    })
                    .catch(error => {
                        // 删除失败，打印错误信息
                        console.error('删除失败', error);
                        // 提示删除失败
                        this.$message.error('删除失败');
                    });
            },
            //删除结束


            blur(id){
                axios.get("/staff/isStaffid/"+id).then(res=>{
                    if(res.data.code===500){
                        this.$message.error(res.data.msg);
                    }else if(res.data.code===200){
                        this.flg=true
                    }
                })
            },

            //编辑开始
            handleEdit(row) {
                //点击编辑按钮，将当前行数据赋值给updatestaff
                this.updatestaff =JSON.parse(JSON.stringify(row));
                //显示编辑对话框
                this.editDialogFormVisible = true;
            },
            updateEnter() {
                //将updatestaff的deptid和roleid分别赋值为department的deptId和role的roleid
                this.updatestaff.deptid = this.updatestaff.department.deptId
                this.updatestaff.roleid = this.updatestaff.role.roleid

                //发送put请求，更新员工信息
                axios.put("/staff/update", this.updatestaff)
                    .then(result => {
                        //更新成功，重新加载表格
                        this.loadTable();
                        //关闭编辑对话框
                        this.editDialogFormVisible = false;
                        //提示编辑成功
                        this.$message.success('编辑成功');
                    })
                    .catch(error => {
                        //提示编辑失败
                        this.$message.error('编辑失败');
                    });
            },
            //编辑结束


            //调动开始
            transfer(row) {
                // 将当前行的员工信息赋值给transferstaff
                this.transferstaff = row;
                this.transferstaff.newdeptid=this.transferstaff.deptid
                // 显示调动员工表单
                this.transferstaffFormVisible = true;
            },
            // 确认调动
            transferEnter() {
                // 将员工所属部门id赋值给transferstaff.deptid
                this.transferstaff.deptid = this.transferstaff.department.deptId
                // 将员工角色id赋值给transferstaff.roleid
                this.transferstaff.roleid = this.transferstaff.role.roleid
                // 发送post请求，将调动信息发送到后端
                axios.post("/stafftransfer/transfer", this.transferstaff).then(result => {
                    if(result.data.code===200){
                        // 隐藏调动员工表单
                        this.transferstaffFormVisible = false;
                        // 提示调动成功
                        this.$message.success('调动中');
                        this.loadTable();

                    }

                }, error => {
                    // 提示调动失败
                    console.error('调动失败', error);
                    this.$message.error('调动失败');
                })
            },
            //调动结束

            //离职
            dimission(row){
                console.log("=====================离职按钮触发了====================")
                console.log(row)
                axios.get("/staff/updateById/"+row.staffid).then(res=>{
                    if(res.data.code===200){
                        this.$message.success(res.data.msg);
                        this.loadTable();

                    }
                })
            },


            loadDepts() {
                axios.get("/dept/selectDepts").then(result => {
                    this.depts = result.data.data;
                    for (let i = 1; i <this.depts.length ; i++) {
                        this.dept.push(this.depts[i])
                    }
                });
            },
            loadRoles() {
                axios.get("/role/selectRoles").then(result => {
                    this.roles = result.data.data;
                    for (let i = 1; i <this.roles.length ; i++) {
                        this.role.push(this.roles[i])
                    }
                    console.log("====================")
                    console.log(this.role)
                });
            }
        }
    })
</script>